import { Component, OnInit } from '@angular/core';
import { NavController, ModalController, LoadingController, ToastController } from '@ionic/angular';
import { RestService } from 'src/app/servece/rest/rest.service';
import { BaseUI } from 'src/app/common/baseui';
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage extends BaseUI implements OnInit {

  defaultHref = '';
  mobile: any;
  nickname: any;
  password: any;
  confirmPassword: any;
  errorMessage: any;
  buttonText = '返回';
  constructor(
    public navCtrl: NavController,
    public modalCtrl: ModalController, // 弹出页面
    public loadingCtrl: LoadingController, // 加载中遮罩
    public toastCtrl: ToastController, // 弹出提示框
    public restService: RestService, // 请求service
    private router: Router

  ) {
    super();
  }

  ngOnInit() {
  }

  gotoLogin() {
    // 返回上一层
    this.navCtrl.pop();
  }

  doRegister() {
    // 为什么前台不做校验？后端接收这些数据可以作为大数据存储，用户后期判断客户可信度的部分证据/
    // 如果系统发布到线上，如果后期需求突然改变（如新发布了122********的手机号），前端写死的话（新的手机号码无法注册），需要提交套appStore并审核，用户更新后才能适应新的需求。

    // 前台验证表单正确定；包括长度，格式，违禁的词语
    // 手机号码验证  ^:开始   $:结束  \d{9}：剩下的数字9位
    if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
      super.showToast(this.toastCtrl, '您的手机号码格式不正确！');
    } else if (this.nickname.length < 2 || this.nickname.length > 10) {
      super.showToast(this.toastCtrl, '请输入2到10位的昵称');
    } else if (this.password.length < 6 || this.password.length > 20) {
      super.showToast(this.toastCtrl, '请输入6到20位的密码');
    } else if (this.password !== this.confirmPassword) {
      super.showToast(this.toastCtrl, '两次输入的密码不匹配');
    } else {
      super.present('正在注册...', this.loadingCtrl);
      // let loading = super.showLoading(this.loadingCtrl, '登陆中...');
      this.restService.register(this.mobile, this.nickname, this.password)
        .subscribe(
          async f => {
            const res = JSON.parse(f);
            if (res['Status'] === 'OK') {
              // 成功,显示弹窗；关闭转圈圈的遮罩；返回上一层；
              super.showToast(this.toastCtrl, res['StatusContent'])
              super.dismiss(this.loadingCtrl);
              this.disMiss();
              this.navCtrl.pop();
            } else {
              super.dismiss(this.loadingCtrl);
              super.showToast(this.toastCtrl, res['StatusContent'])
            }
          },
          error => this.errorMessage = error as any
        );
    }
  }

  disMiss() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }
}
